<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件下载</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 20px;
            color: #333;
            text-align: center;
        }
        .download-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            background-color: #fff;
        }
        h2 {
            color: #2196f3;
            border-bottom: 2px solid #e3f2fd;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .qrcode-container {
            margin: 30px auto;
            width: 256px;
            height: 256px;
        }
        .file-info {
            margin: 20px 0;
            padding: 15px;
            background-color: #f5f5f5;
            border-radius: 4px;
            text-align: left;
        }
        .file-name {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 5px;
        }
        .file-meta {
            color: #666;
            font-size: 14px;
        }
        .download-btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-size: 16px;
            margin-top: 20px;
        }
        .download-btn:hover {
            background-color: #45a049;
        }
        .no-file {
            padding: 30px;
            color: #999;
            font-style: italic;
        }
        .instructions {
            margin-top: 30px;
            padding: 15px;
            background-color: #e3f2fd;
            border-radius: 4px;
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="download-container">
        <h2>文件下载</h2>
        
        <div id="loading">正在获取最新文件信息...</div>
        
        <div id="fileContent" style="display: none;">
            <div class="file-info">
                <div class="file-name" id="fileName">文件名称</div>
                <div class="file-meta">
                    大小: <span id="fileSize">0 KB</span> | 
                    上传时间: <span id="fileTime">2023-01-01 00:00:00</span>
                </div>
            </div>
            
            <div class="qrcode-container">
                <div id="qrcode"></div>
            </div>
            
            <a id="downloadBtn" href="#" class="download-btn">直接下载</a>
            
            <div class="instructions">
                <p><strong>使用说明:</strong></p>
                <p>1. 使用手机扫描上方二维码</p>
                <p>2. 或点击"直接下载"按钮下载文件</p>
                <p>3. 二维码链接有效期为24小时</p>
            </div>
        </div>
        
        <div id="noFile" style="display: none;" class="no-file">
            <p>目前没有可下载的文件</p>
            <p>请先上传文件后再访问此页面</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loading = document.getElementById('loading');
            const fileContent = document.getElementById('fileContent');
            const noFile = document.getElementById('noFile');
            const fileName = document.getElementById('fileName');
            const fileSize = document.getElementById('fileSize');
            const fileTime = document.getElementById('fileTime');
            const downloadBtn = document.getElementById('downloadBtn');
            
            // 获取最新文件信息
            fetch('/api/files/latest')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取文件信息失败: ' + response.status);
                    }
                    // 检查响应内容类型
                    const contentType = response.headers.get('content-type');
                    if (!contentType || !contentType.includes('application/json')) {
                        throw new Error('服务器返回的不是JSON数据');
                    }
                    return response.text().then(text => {
                        // 检查响应是否为空
                        if (!text || text.trim() === '') {
                            return null;
                        }
                        try {
                            return JSON.parse(text);
                        } catch (e) {
                            console.error('JSON解析错误:', e);
                            console.error('原始响应:', text);
                            throw new Error('JSON解析错误: ' + e.message);
                        }
                    });
                })
                .then(data => {
                    loading.style.display = 'none';
                    
                    if (data && data.name) {
                        // 显示文件信息
                        fileContent.style.display = 'block';
                        fileName.textContent = data.name;
                        fileSize.textContent = formatFileSize(data.size);
                        fileTime.textContent = formatDate(data.uploadTime);
                        
                        // 设置下载链接
                        const downloadUrl = `/api/download/${data.name}`;
                        downloadBtn.href = downloadUrl;
                        
                        // 生成二维码
                        const qrcodeElement = document.getElementById('qrcode');
                        qrcodeElement.innerHTML = '';  // 清空之前的二维码
                        
                        // 获取完整的下载URL（包含域名）
                        const fullUrl = window.location.origin + downloadUrl;
                        
                        // 生成二维码
                        new QRCode(qrcodeElement, {
                            text: fullUrl,
                            width: 256,
                            height: 256,
                            colorDark: "#000000",
                            colorLight: "#ffffff",
                            correctLevel: QRCode.CorrectLevel.H
                        });
                    } else {
                        // 没有文件
                        noFile.style.display = 'block';
                    }
                })
                .catch(error => {
                    console.error('获取文件信息错误:', error);
                    loading.textContent = '加载失败: ' + error.message;
                    loading.style.color = 'red';
                });
            
            // 格式化文件大小
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }
            
            // 格式化日期
            function formatDate(timestamp) {
                const date = new Date(timestamp);
                return date.toLocaleString('zh-CN');
            }
        });
    </script>
</body>
</html>